<template>
  <div class="absolute inset-0 p-2 flex flex-col">
    <div class="mb-2">
      <el-radio-group v-model="activeName" size="small">
        <el-radio-button v-for="(item, index) in tabs" :key="item" :index="index" :label="item"></el-radio-button>
      </el-radio-group>
    </div>

    <TableMode v-if="activeName === 'TABLE'" :table-data="tableData" :accuracy-summary="accuracySummary" />
    <template v-else-if="activeName === 'LINE'">
      <LineMode :key="onlyKey" :table-data="tableData"></LineMode>
    </template>
  </div>
</template>

<script>
// 唯一键
import { nanoid } from 'nanoid'
// 引入 api
import { getExample } from '@/api/accuracy-analysis'
// 表格组件
import TableMode from './TableMode.vue'
// 折线图组件
import LineMode from './LineMode.vue'

export default {
  name: 'ExamplePage',
  components: {
    TableMode,
    LineMode
  },
  data() {
    return {
      onlyKey: `key${nanoid()}`,
      // 标签页/选项
      tabs: ['TABLE', 'LINE'],
      // 标签页/激活项
      activeName: 'TABLE',
      // 表格数据
      tableData: [],
      // 准确率统计
      accuracySummary: {}
    }
  },

  created() {
    this.getExample()
  },

  methods: {
    getExample() {
      getExample({}).then((httpResponse) => {
        const response = httpResponse.data
        const data = response.data
        if (response.code === 200) {
          this.tableData = data.tableData
          this.accuracySummary = data.accuracySummary
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .demo-02 {
//   styles
// }
</style>
